<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  propstype: {
    type: Object,
    default: {
      children: "children",
      label: "label",
    },
  },
  treeWidth:{
    type:String,
    default:() =>'100%'
  }
});
const filterText = ref("");
let treeRef = ref();

watch(filterText, (val) => {
  treeRef.value.filter(val);
});

const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};
</script>
<template>
  
  <el-card class="mangotree">
<el-input v-model="filterText" placeholder="Filter keyword" />

    <el-tree
      ref="treeRef"
      class="filter-tree"
      :data="props.data"
      :props="props.propstype"
      :filter-node-method="filterNode"
      show-checkbox
      empty-text="暂无数据"
    >
    </el-tree>
  </el-card>
    
</template>
<style lang="scss" >
.mangotree{
      height: 82%;
    margin-left: 13px;
    margin-top: 29px;
}
</style>
